```jsx {14-16}
const ColorPicker = () => {
  const service = useMachine(colorPicker.machine, {
    id: createUniqueId(),
    defaultValue: colorPicker.parse("hsl(0, 100%, 50%)"),
  })

  const api = createMemo(() => colorPicker.connect(service, normalizeProps))

  return (
    <div {...api().getRootProps()}>
      {/* ... */}
      <div {...api().getPositionerProps()}>
        <div {...api().getContentProps()}>
          <button {...api().getEyeDropperTriggerProps()}>
            <EyeDropIcon />
          </button>
        </div>
      </div>
    </div>
  )
}
```
